<template>
  <div>
    <van-nav-bar title="订单列表" @click-left="onClickLeft" class="navBar">
      <template #left>
        <van-icon name="arrow-left" size="24" color="#666" />
      </template>
      <template #right>
        <van-icon name="search" size="24" color="#666" />
      </template>
    </van-nav-bar>
    <van-tabs
      v-model="active"
      color="#ff6700"
      line-width="50"
      line-height="2px"
      title-active-color="#ff6700"
      title-inactive-color="#3c3c3c"
    >
      <van-tab title="全部">
        <div v-for="item in orderList" :key="item.id">
          <div class="p15">
            <div class="flex just-between">
              <div>
                <img src="./../assets/icon.png" width="20" />
                <span class="fw600 vt ml5 color-3">小米商城</span>
              </div>
              <div class="color-main fs13 fw600">
                <span v-if="item.status === 0">待付款</span>
                <span v-if="item.status === 1">已付款</span>
                <span v-if="item.status === 2">已完成</span>
              </div>
            </div>
            <van-divider />
            <div class="flex just-between">
              <div class="w20 border-box">
                <img width="100%" :src="item.goodsData.mainImage" />
              </div>
              <div class="w60 border-box pl15">
                <p class="fw600 color3 over-1 w95">
                  {{ item.goodsData.title }}
                </p>
                <p class="color-ccc over-1 fs12 mt10">
                  {{ item.goodsData.sku }}
                </p>
              </div>
              <div class="w20 border-box align-right color-3c">
                <p><span class="vt fs12">￥</span>{{ item.goodsData.price *0.01 }}</p>
                <p class="mt10">x{{ item.goodsData.seletedNum }}</p>
                <van-button  v-if="item.status === 0" @click="buy(item.id)" class="mt10 pl8 pr8" plain hairline round size="mini" color="#ff6700">去付款</van-button>
              </div>
            </div>
            <van-divider />
            <div class="flex just-between pb15">
              <div class="fs12 vt color-3c">{{ item.createTime }}</div>
              <div class="color-3 fw600 fs14">
                实付金额：
                <span class="color-main fs12 vt ml5"> ￥</span
                ><span class="color-main fs18"
                  >{{ item.goodsData.price *0.01 * item.goodsData.seletedNum }}
                </span>
              </div>
            </div>
          </div>
          <base-line></base-line>
        </div>
        <van-empty v-show="orderList.length == 0" description="去看看有什么想买的吧~" />
      </van-tab>
      <van-tab title="待付款">
        <div v-for="item in waitPayList" :key="item.id">
          <div class="p15">
            <div class="flex just-between">
              <div>
                <img src="./../assets/icon.png" width="20" />
                <span class="fw600 vt ml5 color-3">小米商城</span>
              </div>
              <div class="color-main fs13 fw600">
                <span v-if="item.status === 0">待付款</span>
                <span v-if="item.status === 1">已付款</span>
                <span v-if="item.status === 2">已完成</span>
              </div>
            </div>
            <van-divider />
            <div class="flex just-between">
              <div class="w20 border-box">
                <img width="100%" :src="item.goodsData.mainImage" />
              </div>
              <div class="w60 border-box pl15">
                <p class="fw600 color3 over-1 w95">
                  {{ item.goodsData.title }}
                </p>
                <p class="color-ccc over-1 fs12 mt10">
                  {{ item.goodsData.sku }}
                </p>
              </div>
              <div class="w20 border-box align-right color-3c">
                <p><span class="vt fs12">￥</span>{{ item.goodsData.price *0.01 }}</p>
                <p class="mt10">x{{ item.goodsData.seletedNum }}</p>
                <van-button @click="buy(item.id)" class="mt10 pl8 pr8" plain hairline round size="mini" color="#ff6700">去付款</van-button>
              </div>
            </div>
            <van-divider />
            <div class="flex just-between pb15">
              <div class="fs12 vt color-3c">{{ item.createTime }}</div>
              <div class="color-3 fw600 fs14">
                实付金额：
                <span class="color-main fs12 vt ml5"> ￥</span
                ><span class="color-main fs18"
                  >{{ item.goodsData.price *0.01 * item.goodsData.seletedNum }}
                </span>
              </div>
            </div>
          </div>
          <base-line></base-line>
        </div>
        <van-empty v-show="waitPayList.length == 0" description="去看看有什么想买的吧~" />
      </van-tab>
      <van-tab title="已付款">
        <div v-for="item in PaidList" :key="item.id">
          <div class="p15">
            <div class="flex just-between">
              <div>
                <img src="./../assets/icon.png" width="20" />
                <span class="fw600 vt ml5 color-3">小米商城</span>
              </div>
              <div class="color-main fs13 fw600">
                <span v-if="item.status === 0">待付款</span>
                <span v-if="item.status === 1">已付款</span>
                <span v-if="item.status === 2">已完成</span>
              </div>
            </div>
            <van-divider />
            <div class="flex just-between">
              <div class="w20 border-box">
                <img width="100%" :src="item.goodsData.mainImage" />
              </div>
              <div class="w60 border-box pl15">
                <p class="fw600 color3 over-1 w95">
                  {{ item.goodsData.title }}
                </p>
                <p class="color-ccc over-1 fs12 mt10">
                  {{ item.goodsData.sku }}
                </p>
              </div>
              <div class="w20 border-box align-right color-3c">
                <p><span class="vt fs12">￥</span>{{ item.goodsData.price *0.01 }}</p>
                <p class="mt10">x{{ item.goodsData.seletedNum }}</p>
              </div>
            </div>
            <van-divider />
            <div class="flex just-between pb15">
              <div class="fs12 vt color-3c">{{ item.createTime }}</div>
              <div class="color-3 fw600 fs14">
                实付金额：
                <span class="color-main fs12 vt ml5"> ￥</span
                ><span class="color-main fs18"
                  >{{ item.goodsData.price*0.01 * item.goodsData.seletedNum }}
                </span>
              </div>
            </div>
          </div>
          <base-line></base-line>
        </div>
        <van-empty v-show="PaidList.length == 0" description="去看看有什么想买的吧~" />

      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import baseLine from "./../components/base/base-line.vue";
import axios from 'axios'
export default {
  components: {
    baseLine,
  },
  data() {
    return {
      active: 0,
      orderList: []
    };
  },
  computed: {
    waitPayList() {
      return this.orderList.filter((item) => item.status == 0);
    },
    PaidList() {
      return this.orderList.filter((item) => item.status == 1);
    },
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    getList () {
      // 一进入界面就发起订单列表请求
      axios.post('/api/orderList',{userId: localStorage.getItem('userId')}).then(data => {
        this.orderList = data.data.data.reverse()
      })
    },
    // 点击付款执行
    buy (id) {
      this.$dialog.confirm({
        title: '付钱吗 ？？？',
      })
        .then(() => {
          axios.post('/api/changeOrder', {
              id: id
            }).then(data => {
              if (data.data.code == 200) {
                this.$toast({
                  message: '付款成功',
                  icon: 'success'
                })
                this.getList()
              }
            })
        })
     
    }
  },
  mounted () {
    this.getList() 
  }
};
</script>

<style lang="less" scoped>
.navBar {
  /deep/ .van-nav-bar__content {
    background: #f2f2f2;
    color: #666;
  }
}
</style>